<template>
	<view class="index">
		<view class="banner">
			<swiper indicator-dots autoplay interval="3000">
				<swiper-item v-for="item in banner" :key="item.public_id">
					<image :src="item.icon_url"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in nav" :key="index" @click="navclick(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="goodsshop">
			<view class="goodsshop_title">-推荐商品-</view>
			<hotshop @goxqy="goxqy" :hotshop="hotshop"></hotshop>
		</view>
	</view>
</template>

<script>
	import hotshop from '../../componets/hotshop.vue'
	export default {
		data() {
			return {
				nav: [{
						icon: 'iconfont icon-shangcheng',
						title: '小安商城',
						path: '/pages/shoplist/shoplist'
					},
					{
						icon: 'iconfont icon-lianxiwomen',
						title: '联系我们',
						path: '/pages/callme/callme'
					},
					{
						icon: 'iconfont icon-shangcheng',
						title: '小安商城',
						path: '/pages/shoplist/shoplist'
					},
					{
						icon: 'iconfont icon-lianxiwomen',
						title: '联系我们',
						path: '/pages/callme/callme'
					}
				],
				banner: [],
				hotshop: []
			}
		},
		onLoad() {
			this.getapp()
		},
		methods: {
			// nav点击事件
			navclick(url) {
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			//调用接口
			getapp() {
				uni.request({
					url: "http://demo.itlike.com/web/xlmc/api/homeApi",
					success: res => {
						console.log(res)
						this.banner = res.data.data.list[0].icon_list // 轮播图api
						this.hotshop = res.data.data.list[4].product_list //推荐商品
					}
				})
			},
			//详情页
			goxqy(item) {
				uni.navigateTo({
					url: '../xqy/xqy?xqyshop=' + encodeURIComponent(JSON.stringify(item))
				})
				console.log(item)
			}
		},
		components: {
			hotshop,
		}
	}
</script>

<style lang="scss">
	.index {
		background-color: #f8f8f8;

		swiper {
			width: 750rpx;
			height: 458rpx;
			margin-top: -100rpx;

			image {
				width: 100%;
			}
		}

		.nav {
			display: flex;
			padding: 30rpx 0;
			background-color: #fff;

			.nav_item {
				width: 25%;
				text-align: center;

				view {
					margin: 0 auto;
					margin-bottom: 15rpx;
					color: #fff;
					width: 120rpx;
					height: 120rpx;
					line-height: 120rpx;
					border-radius: 50%;
					font-size: 45rpx;
					background-color: #d81e06;
				}

				text {
					font-size: 30rpx;
				}
			}
		}

		.goodsshop {
			width: 100%;
			margin-top: 5rpx;

			.goodsshop_title {
				margin-bottom: 5rpx;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				letter-spacing: 20rpx;
				background-color: #fff;
			}

		}
	}
</style>
